<template>
  <div class="rotas">
    
  </div>
</template>

<style scoped>
.rotas {
  width: 2.5rem;
  height: 5.5rem;
  margin: 0 auto;
  background-color: rgba(23, 45, 203, .3);
  border-color: rgba(18, 230, 219, 0.8);
  border-width: .725rem;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  animation-name: rotatexy;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatexy {
  0% {
    transform: rotateX(0deg);
  }
  10% {
    transform: rotateX(36deg);
  }
  20% {
    transform: rotateX(72deg);
  }
  30% {
    transform: rotateX(108deg);
  }
  40% {
    transform: rotateX(144deg);
  }
  50% {
    transform: rotateX(180deg);
  }
    60% {
    transform: rotateX(216deg);
  }
  70% {
    transform: rotateX(252deg);
  }
  80% {
    transform: rotateX(298deg);
  }
  90% {
    transform: rotateX(324deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
</style>
